<script setup>
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
const value4 = ref(null);
// BMC设置
const value_name = ref(null);
const value_password = ref(null);
const value_id = ref(null);
const value_delay = ref(null);
const value_others = ref(null);
const checked = ref(false); // 侧栏--时区开关

// 侧边栏
const visibleRight_timeZone = ref(false);
const visibleRight_BMC = ref(false);
const visibleRight_SNMP = ref(false);
const visibleRight_failover = ref(false);
const visibleRight_burnConfig = ref(false);
//跳转至当前标题下的页面
const currentTitle = ref(null);
// 侧栏--跳转事件
const handleClick = (index) => {
    if (index == 0) {
        visibleRight_timeZone.value = true;
    } else if (index == 1) {
        visibleRight_BMC.value = true;
    } else if (index == 2) {
        visibleRight_SNMP.value = true;
    } else if (index == 3) {
        visibleRight_failover.value = true;
    } else if (index == 4) {
        visibleRight_burnConfig.value = true;
    }
    currentTitle.value = jumpItem.value[index];
};
//侧栏--BMC设置--特权
const selectedPrivilege = ref();
const privilege = ref([{ name: '回调' }, { name: '用户' }, { name: '算子' }, { name: '管理员' }, { name: '无访问权限' }]);

// 侧栏--时区设置
const selectedCity = ref();
const cities = ref([
    { name: 'New York', code: 'NY' },
    { name: 'Rome', code: 'RM' },
    { name: 'London', code: 'LDN' },
    { name: 'Istanbul', code: 'IST' },
    { name: 'Paris', code: 'PRS' }
]);

// 面板--跳转项
const jumpItem = ref(['时区', 'BMC设置', 'SNMP设置', '故障转移', '烧录配置']);
// 面板--添加管理员
const addVisible = ref(false);
const handleAddManager = () => {
    addVisible.value = true;
};
</script>
<template>
    <div style="overflow: auto; max-height: 400px">
        <!-- 跳转到--开始 -->
        <Panel header="跳转到" toggleable>
            <div>
                <Button v-for="(j, index) in jumpItem" :key="j" :label="j" icon="pi pi-chevron-right" iconPos="right" severity="info" style="margin-right: 0.25em" @click="handleClick(index)"></Button>
                <!-- 侧边栏--时区 -->
                <Sidebar v-model:visible="visibleRight_timeZone" position="right" style="width: 400px">
                    <h2>{{ currentTitle }}</h2>
                    <div style="display: flex; flex-direction: column; gap: 25px">
                        <div class="flex flex-column gap-2">
                            <small>时区设置</small>
                            <Dropdown v-model="selectedCity" :options="cities" optionLabel="name" placeholder="Select a City" />
                        </div>
                        <div class="flex gap-2">
                            <InputSwitch v-model="checked" />
                            <small>BIOS UTC标准时间</small>
                        </div>
                        <div class="flex gap-2">
                            <Button label="删除" icon="pi pi-trash" plain raised />
                            <Button label="保存" icon="pi pi-save" text raised />
                        </div>
                    </div>
                </Sidebar>
                <!-- 侧边栏--BMC设置 -->
                <Sidebar v-model:visible="visibleRight_BMC" position="right" style="width: 350px">
                    <h2>{{ currentTitle }}</h2>

                    <div class="" style="display: flex; flex-direction: column; gap: 25px">
                        <div class="flex flex-column gap-2">
                            <small>用户名</small>
                            <span class="p-input-icon-left">
                                <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                <InputText v-model="value_name" placeholder="name" />
                            </span>
                        </div>
                        <div class="flex flex-column gap-2">
                            <small>密码</small>
                            <span class="p-input-icon-left">
                                <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                <InputText type="password" v-model="value_password" />
                            </span>
                        </div>
                        <div class="flex flex-column gap-2">
                            <small>用户ID</small>
                            <span class="p-input-icon-left">
                                <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                <InputText v-model="value_id" placeholder="1" />
                            </span>
                        </div>
                        <div class="flex flex-column gap-2">
                            <small>电源复位延迟(单位：秒)</small>
                            <span class="p-input-icon-left">
                                <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                <InputText v-model="value_delay" placeholder="2" />
                            </span>
                        </div>
                        <div class="flex flex-column gap-2">
                            <small>其它参数</small>
                            <span class="p-input-icon-left">
                                <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                <InputText v-model="value_others" placeholder="其它" />
                            </span>
                        </div>
                        <div class="flex flex-column gap-2">
                            <small>特权</small>
                            <span class="p-input-icon-left">
                                <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                <Dropdown v-model="selectedPrivilege" :options="privilege" optionLabel="name" placeholder="管理员" class="w-full md:w-14rem" />
                            </span>
                        </div>
                        <div class="flex gap-2">
                            <Button label="删除" icon="pi pi-trash" plain raised />
                            <Button label="保存" icon="pi pi-save" text raised />
                        </div>
                    </div>
                </Sidebar>
                <!-- 侧边栏--SNMP设置 -->
                <Sidebar v-model:visible="visibleRight_SNMP" position="right" style="width: 400px">
                    <h2>{{ currentTitle }}</h2>
                    <div class="flex flex-column gap-3">
                        <Panel header="版本 和其他 3 个参数" toggleable>
                            <div style="display: flex; flex-direction: column; gap: 25px">
                                <div class="flex flex-column gap-2">
                                    <small>版本</small>
                                    <span class="p-input-icon-left">
                                        <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                        <InputText v-model="value_id" placeholder="V2C" />
                                    </span>
                                </div>
                                <div class="flex flex-column gap-2">
                                    <small>超时</small>
                                    <span class="p-input-icon-left">
                                        <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                        <InputText v-model="value_id" placeholder="0" />
                                    </span>
                                </div>
                                <div class="flex flex-column gap-2">
                                    <small>VLAN超时</small>
                                    <span class="p-input-icon-left">
                                        <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                        <InputText v-model="value_id" placeholder="1" />
                                    </span>
                                </div>
                                <div class="flex flex-column gap-2">
                                    <small>重试</small>
                                    <span class="p-input-icon-left">
                                        <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                        <InputText v-model="value_id" placeholder="-1" />
                                    </span>
                                </div>
                            </div>
                        </Panel>
                        <Panel header="写入字符串 和其他 1 个参数" toggleable>
                            <div style="display: flex; flex-direction: column; gap: 25px">
                                <div class="flex flex-column gap-2">
                                    <small>写入字符串</small>
                                    <span class="p-input-icon-left">
                                        <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                        <InputText type="password" v-model="value_password" />
                                    </span>
                                </div>
                                <div class="flex flex-column gap-2">
                                    <small>读取字符串</small>
                                    <span class="p-input-icon-left">
                                        <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                        <InputText type="password" v-model="value_password" />
                                    </span>
                                </div>
                            </div>
                        </Panel>
                        <div class="flex gap-2">
                            <Button label="删除" icon="pi pi-trash" plain raised />
                            <Button label="保存" icon="pi pi-save" text raised />
                        </div>
                    </div>
                </Sidebar>
                <!-- 侧边栏--故障转移 -->
                <Sidebar v-model:visible="visibleRight_failover" position="right" style="width: 400px">
                    <h2>{{ currentTitle }}</h2>
                    <div class="flex flex-column gap-3">
                        <Panel header="辅助头节点 和其他 1 个参数" toggleable>
                            <div style="display: flex; flex-direction: column; gap: 25px">
                                <div class="flex flex-column gap-2">
                                    <small>版本</small>
                                    <span class="p-input-icon-left">
                                        <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                        <InputText v-model="value_id" placeholder="V2C" />
                                    </span>
                                </div>
                            </div>
                        </Panel>
                        <Panel header="故障转移网络" toggleable>
                            <div style="display: flex; flex-direction: column; gap: 25px">
                                <div class="flex flex-column gap-2">
                                    <small>版本</small>
                                    <span class="p-input-icon-left">
                                        <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                        <InputText v-model="value_id" placeholder="V2C" />
                                    </span>
                                </div>
                                <div class="flex flex-column gap-2">
                                    <small>超时</small>
                                    <span class="p-input-icon-left">
                                        <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                        <InputText v-model="value_id" placeholder="0" />
                                    </span>
                                </div>
                                <div class="flex flex-column gap-2">
                                    <small>VLAN超时</small>
                                    <span class="p-input-icon-left">
                                        <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                        <InputText v-model="value_id" placeholder="1" />
                                    </span>
                                </div>
                                <div class="flex flex-column gap-2">
                                    <small>重试</small>
                                    <span class="p-input-icon-left">
                                        <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                        <InputText v-model="value_id" placeholder="-1" />
                                    </span>
                                </div>
                            </div>
                        </Panel>
                        <Panel header="KEEP ALIVE 和其他 4 个参数" toggleable>
                            <div style="display: flex; flex-direction: column; gap: 25px">
                                <div class="flex flex-column gap-2">
                                    <small>版本</small>
                                    <span class="p-input-icon-left">
                                        <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                        <InputText v-model="value_id" placeholder="V2C" />
                                    </span>
                                </div>
                                <div class="flex flex-column gap-2">
                                    <small>超时</small>
                                    <span class="p-input-icon-left">
                                        <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                        <InputText v-model="value_id" placeholder="0" />
                                    </span>
                                </div>
                                <div class="flex flex-column gap-2">
                                    <small>VLAN超时</small>
                                    <span class="p-input-icon-left">
                                        <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                        <InputText v-model="value_id" placeholder="1" />
                                    </span>
                                </div>
                                <div class="flex flex-column gap-2">
                                    <small>重试</small>
                                    <span class="p-input-icon-left">
                                        <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                        <InputText v-model="value_id" placeholder="-1" />
                                    </span>
                                </div>
                            </div>
                        </Panel>
                        <Panel header="挂载脚本 和其他 1 个参数" toggleable>
                            <div style="display: flex; flex-direction: column; gap: 25px">
                                <div class="flex flex-column gap-2">
                                    <small>版本</small>
                                    <span class="p-input-icon-left">
                                        <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                        <InputText v-model="value_id" placeholder="V2C" />
                                    </span>
                                </div>
                            </div>
                        </Panel>
                        <Panel header="故障转移前脚本 和其他 1 个参数" toggleable>
                            <div style="display: flex; flex-direction: column; gap: 25px">
                                <div class="flex flex-column gap-2">
                                    <small>版本</small>
                                    <span class="p-input-icon-left">
                                        <i class="pi pi-info-circle" v-tooltip="{ value: '用于发送BMC命令的用户名', autoHide: true }" />
                                        <InputText v-model="value_id" placeholder="V2C" />
                                    </span>
                                </div>
                            </div>
                        </Panel>
                        <div class="flex gap-2">
                            <Button label="删除" icon="pi pi-trash" plain raised />
                            <Button label="保存" icon="pi pi-save" text raised />
                        </div>
                    </div>
                </Sidebar>
                <!-- 侧边栏--烧录配置 -->
                <Sidebar v-model:visible="visibleRight_burnConfig" position="right" style="width: 400px">
                    <h2>{{ currentTitle }}</h2>

                    <div class="card" style="display: flex; flex-direction: column; gap: 25px">
                        <div class="flex flex-column gap-2">
                            <small>集群名称</small>
                            <InputText id="1" v-model="value1" placeholder="ehpcview" />
                        </div>
                        <div class="flex flex-column gap-2">
                            <small>名字</small>
                            <InputText id="2" v-model="value2" placeholder="base" />
                        </div>
                        <div class="flex gap-2">
                            <Button label="删除" icon="pi pi-trash" plain raised />
                            <Button label="保存" icon="pi pi-save" text raised />
                        </div>
                    </div>
                </Sidebar>
            </div>
        </Panel>
        <!-- 跳转到--结束 -->
        <!-- 面板 -->
        <Panel header="CLUSTER NAME 和其他 2 个参数" toggleable>
            <div style="display: flex; gap: 10px; overflow: auto">
                <div class="flex flex-column gap-2">
                    <small>集群名称</small>
                    <InputText v-model="value1" placeholder="ehpcview" />
                </div>
                <div class="flex flex-column gap-2">
                    <small>名字</small>
                    <InputText v-model="value2" placeholder="base" />
                </div>
                <div class="flex flex-column gap-2">
                    <small> &nbsp;</small>
                    <InputText v-model="value3" readonly placeholder="管理员电子邮件 &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp +" @click="handleAddManager" />
                </div>
            </div>
        </Panel>
        <Panel header="NODE BASENAME 和 1 个其他参数" toggleable>
            <div style="display: flex; gap: 10px; overflow: auto">
                <div class="flex flex-column gap-2">
                    <small>节点基数名称</small>
                    <InputText v-model="value1" placeholder="node" />
                </div>
                <div class="flex flex-column gap-2">
                    <small>节点数字</small>
                    <InputText v-model="value1" placeholder="3" />
                </div>
            </div>
        </Panel>
        <Panel header="NAME SERVERS 和其他 2 个参数" toggleable></Panel>
        <Panel header="SEARCH DOMAINS 和 1 个其他参数" toggleable></Panel>
        <Panel header="外部可见 IP 和 1 个其他参数" toggleable></Panel>
        <Panel header="默认刻录配置" toggleable></Panel>
        <Panel header="EXTERNAL NETWORK 和其他 2 个参数" toggleable></Panel>
        <Panel header="默认类别" toggleable></Panel>
        <Panel header="对安装程序证书进行签名" toggleable></Panel>
        <Panel header="笔记" toggleable></Panel>
    </div>
    <!-- 底栏按钮功能 -->
    <div class="card flex flex-wrap gap-3 justify-content-center" style="padding: 15px">
        <Button label="撤销" icon="pi pi-undo" />
        <Button label="保存" icon="pi pi-save" disabled />
    </div>
    <!-- 弹框 -->
    <Dialog v-model:visible="addVisible" header="添加管理员电子邮件 &nbsp">
        <div style="display: flex; flex-direction: column; gap: 10px">
            <div style="display: flex; gap: 5px">
                <InputText type="email" v-model="value4" />
                <Button icon="pi pi-trash" severity="danger" text />
            </div>
            <Button label="添加" outlined severity="success" icon="pi pi-plus" />
        </div>

        <template #footer>
            <Button label="Ok" icon="pi pi-check" @click="addVisible = false" autofocus severity="secondary" outlined />
        </template>
    </Dialog>
</template>
<style scoped lang="scss">
:deep(.p-inputtext) {
    cursor: pointer;
}
</style>
